<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于黑伞青 | 个人博客</title>
    
    <link rel="stylesheet" href="css/all.css"> <!-- 正确路径 -->
    <script src="js/all.js"></script> <!-- 正确路径 -->
    <link rel="stylesheet" href="css/about.css"> <!-- 正确路径 -->
    <script src="js/about.js"></script> <!-- 正确路径 -->
</head>
<body>
   
    <header class="main-header">
        <nav>
            <ul class="nav-list">
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="blog.html">技术博客</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
        <!-- 导航栏与首页保持一致 -->
    </header>

    <main class="container">
        

        <!-- 爱好展示区 -->
        <section class="hobbies-section">
            <h2>我的爱好</h2>
            <div class="gallery-grid">
                <div class="gallery-item sports">
                    <img src="images/basketball.jpg" width="300px" height="400px" alt="篮球运动">
                    <div class="overlay">
                        <h3>篮球</h3>
                        <p>不唯有篮球不可辜负！</p>
                    </div>
                </div>
                <div class="gallery-item sports">
                    <img src="images/dream.jpg" width="300px" height="400px" alt="篮球运动">
                    <div class="overlay">
                        <h3>写梦</h3>
                        <p>有些梦实在想写下来，串成故事集。</p>
                    </div>
                </div>
                <div class="gallery-item sports">
                    <img src="images/reading.jpg" width="300px" height="400px" alt="篮球运动">
                    <div class="overlay">
                        <h3>看书</h3>
                        <p>什么时候有这闲情雅致就好</p>
                    </div>
                </div>
                <div class="gallery-item painting">
                    <img src="images/00047.jpg" width="300px" height="400px" alt="画">
                    <div class="overlay">
                        <h3>画画</h3>
                        <p>copy大法（这个乱画的）</p>
                    </div>
                </div>
                <div class="gallery-item painting">
                    <canvas id="sketch1"></canvas>
                    <div class="overlay">
                        <h3>代码画</h3>
                        <p>顾名思义，用代码敲出来的画</p>
                    </div>
                </div>
                <!-- 添加更多画廊项 -->
            </div>
        </section>
    </main>

</body>
</html>